<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p th:text="${msg}" style="color: red;"></p>
    <h1>登录</h1>
    <form th:action="@{/login}">
        <p>用户名: <input type="text" id="username" name="username" onblur="a1()"></p>
        <div class="userInfo"></div>
        <p>密码: <input type="text" name="password"></p>
        <p><input type="submit"></p>
    </form>
    <script th:src="@{/js/jquery.min.js}" src="/js/jquery.min.js"></script>
    <script>
        function a1() {
            $.ajax({
                url: "checkname",
                data: {"name":$("#username").val()},
                success: function (data) {
                    if (data.toString() == 'ok'){
                        document.getElementById("userInfo").css("color","green");
                    }else {
                        document.getElementById("userInfo").css("color","red");
                    }
                    document.getElementById("userInfo").innerText = data;
                }
            })

        }
    </script>
</body>
</html>